<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>饼状图2</title>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.4/jquery.min.js"></script>  
	<script src = "http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
	<!-- <script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script> -->
	<!-- 	<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.js"></script> -->
	<!-- <script src="https://cdn.bootcss.com/echarts/3.8.4/echarts-en.js"></script> -->
</head>
<style>
		#container0,#container,#container1,#container2,#container3{
			width: 1400px;
			height:300px;
			
		}

	</style>
<body>
	<input type="file" multiple="multiple">
	<div id="container0"></div>
	<div id="container"></div>
	<div id="container1"></div>
	<div id="container2"></div>
	<div id="container3"></div>
	<script>


	
                    

	const Echartsoption = function(Option) {};
	Echartsoption.prototype = {

			pieOption:function(Option){
				

					var dom = Option.dom;
				
			        var myChart = echarts.init(dom);
					var option = {
						backgroundColor: Option.backgroundColor,//背景色
					    title : {
					        text: Option.title.text,
					        subtext: Option.title.subtext,
					        x:Option.title.x
					    },
					    // tooltip : {
					    //     trigger: 'item',
					    //     formatter: "{a} <br/>{b} : {c} ({d}%)"

					    // },
					    tooltip : {
			                            trigger: Option.tooltip.trigger,
			                            showDelay: Option.tooltip.showDelay,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
			                            hideDelay: Option.tooltip.hideDelay,            // 隐藏延迟，单位ms
			                            transitionDuration :Option.tooltip.transitionDuration,  // 动画变换时间，单位s
			                            formatter: Option.tooltip.formatter,
			                       },
					    legend: {
					        orient : Option.legend.orient,//horizontal,水平

					        //小图标位置
					       // x : 'left',//right,center
					        //y :"bottom",//center,top,
					        top: Option.legend.top,
			               
			                left: Option.legend.left,
					        data:Option.legend.data
					    },

					    calculable : Option.calculable,
					    series : [
					        {
					        	hoverAnimation:Option.series.hoverAnimation,//hover动画开关
					        	 selectedMode: Option.series.selectedMode,//选中时的状态
					            name:Option.series.name,
					            type:Option.series.type,
					            radius : Option.series.radius,
					            center: Option.series.center,
					            data:Option.series.data
					        }
					    ]
					};
			        if (option && typeof option === "object") {
			                    myChart.setOption(option, true)
			        }         	
			},

			lineOption:function(Option){
				var dom = Option.dom;
                var myChart = echarts.init(dom);

                    // option = null;
                    option = {
                        backgroundColor: Option.backgroundColor,//背景色
                           grid: {
                                width:Option.grid.width,
                                height:Option.grid.height,
                                top:Option.grid.top
                                // left: '2%',
                                // right: '0.5%',
                                // bottom: '3%',
                                // containLabel: true
                                },
                      	title: {

                            text: Option.title.text,
                            left: Option.title.left,
                            top:Option.title.top,
                            textStyle: Option.title.textStyle ,
                            subtext:Option.title.subtext,

                        },
                        tooltip : {
                            trigger: Option.tooltip.trigger
                        },
                        legend: {
                            data:Option.legend.data,
                             top: Option.legend.top
                        },
                        calculable : Option.calculable,
                        xAxis : Option.xAxis,
                        yAxis :  Option.yAxis,
                        series : Option.series
                        
                    };
                    if (option && typeof option === "object") {
                        myChart.setOption(option, true);
                    }     
			},

			lineOption2:function(Option){
				var dom = $("#container2")[0];
				var myChart = echarts.init(dom);
				option = {
				    title : {
				        text : '时间坐标折线图',
				        subtext : 'dataZoom支持'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter : function (params) {
				            var date = new Date(params.value[0]);
				            data = date.getFullYear() + '-'
				                   + (date.getMonth() + 1) + '-'
				                   + date.getDate() + ' '
				                   + date.getHours() + ':'
				                   + date.getMinutes();
				            return data + '<br/>'
				                   + params.value[1] + ', ' 
				                   + params.value[2];
				        }
				    },
				    // toolbox: {
				    //     show : true,
				    //     feature : {
				    //         mark : {show: true},
				    //         dataView : {show: true, readOnly: false},
				    //         restore : {show: true},
				    //         saveAsImage : {show: true}
				    //     }
				    // },
				    dataZoom: {
				        show: true,
				        start : 70
				    },
				    legend : {
				        data : ['series1']
				    },
				    grid: {
				        y2: 80
				    },
				    xAxis : [
				        {
				            type : 'time',
				            splitNumber:10
				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name: 'series1',
				            type: 'line',
				            showAllSymbol: true,
				            symbolSize: function (value){
				                return Math.round(value[2]/10) + 2;
				            },
				            data: (function () {
				                var d = [];
				                var len = 0;
				                var now = new Date();
				                var value;
				                while (len++ < 200) {
				                    d.push([
				                        new Date(2014, 9, 1, 0, len * 10000),
				                        (Math.random()*30).toFixed(2) - 0,
				                        (Math.random()*100).toFixed(2) - 0
				                    ]);
				                }
				                return d;
				            })()
				        }
				    ]
				};
                    
			  	if (option && typeof option === "object") {
		                    myChart.setOption(option, true)
		        }    
			},

			barOption:function(Option){
				var dom = $("#container1")[0];
				var myChart = echarts.init(dom);

				option = {
					    title : {
					        text: '某地区蒸发量和降水量',
					        subtext: '纯属虚构'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					        data:['蒸发量','降水量']
					    },
					    // toolbox: {
					    //     show : true,
					    //     feature : {
					    //         mark : {show: true},
					    //         dataView : {show: true, readOnly: false},
					    //         magicType : {show: true, type: ['line', 'bar']},
					    //         restore : {show: true},
					    //         saveAsImage : {show: true}
					    //     }
					    // },
					    calculable : true,
					    xAxis : [
					        {
					            type : 'category',
					            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
					        }
					    ],
					    yAxis : [
					        {
					            type : 'value'
					        }
					    ],
					    series : [
					        {
					            name:'蒸发量',
					            type:'bar',
					            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
					            markPoint : {
					                data : [
					                    {type : 'max', name: '最大值'},
					                    {type : 'min', name: '最小值'}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name: '平均值'}
					                ]
					            }
					        },
					        {
					            name:'降水量',
					            type:'bar',
					            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
					            markPoint : {
					                data : [
					                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
					                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
					                ]
					            },
					            markLine : {
					                data : [
					                    {type : 'average', name : '平均值'}
					                ]
					            }
					        }
					    ]
				};
				if (option && typeof option === "object") {
			        myChart.setOption(option, true)
			    }  
			},
			mapOption:function(Option){
				var dom = $("#container3")[0];
				var myChart = echarts.init(dom);
				option = {
					    backgroundColor: '#1b1b1b',
					    color: ['gold','aqua','lime'],
					    title : {
					        text: '模拟迁徙',
					        subtext:'数据纯属虚构',
					        x:'center',
					        textStyle : {
					            color: '#fff'
					        }
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: '{b}'
					    },
					    legend: {
					        orient: 'vertical',
					        x:'left',
					        data:['北京 Top10', '上海 Top10', '广州 Top10'],
					        selectedMode: 'single',
					        selected:{
					            '上海 Top10' : false,
					            '广州 Top10' : false
					        },
					        textStyle : {
					            color: '#fff'
					        }
					    },
					    dataRange: {
					        min : 0,
					        max : 100,
					        calculable : true,
					        color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
					        textStyle:{
					            color:'#fff'
					        }
					    },
					    series : [
					        {
					            name: '全国',
					            type: 'map',
					            roam: true,
					            hoverable: false,
					            mapType: 'china',
					            itemStyle:{
					                normal:{
					                    borderColor:'rgba(100,149,237,1)',
					                    borderWidth:0.5,
					                    areaStyle:{
					                        color: '#1b1b1b'
					                    }
					                }
					            },
					            data:[],
					            markLine : {
					                smooth:true,
					                symbol: ['none', 'circle'],  
					                symbolSize : 1,
					                itemStyle : {
					                    normal: {
					                        color:'#fff',
					                        borderWidth:1,
					                        borderColor:'rgba(30,144,255,0.5)'
					                    }
					                },
					                data : [
					                    [{name:'北京'},{name:'包头'}],
					                    [{name:'北京'},{name:'北海'}],
					                    [{name:'北京'},{name:'广州'}],
					                    [{name:'北京'},{name:'郑州'}],
					                    [{name:'北京'},{name:'长春'}],
					                    [{name:'北京'},{name:'长治'}],
					                    [{name:'北京'},{name:'重庆'}],
					                    [{name:'北京'},{name:'长沙'}],
					                    [{name:'北京'},{name:'成都'}],
					                    [{name:'北京'},{name:'常州'}],
					                    [{name:'北京'},{name:'丹东'}],
					                    [{name:'北京'},{name:'大连'}],
					                    [{name:'北京'},{name:'东营'}],
					                    [{name:'北京'},{name:'延安'}],
					                    [{name:'北京'},{name:'福州'}],
					                    [{name:'北京'},{name:'海口'}],
					                    [{name:'北京'},{name:'呼和浩特'}],
					                    [{name:'北京'},{name:'合肥'}],
					                    [{name:'北京'},{name:'杭州'}],
					                    [{name:'北京'},{name:'哈尔滨'}],
					                    [{name:'北京'},{name:'舟山'}],
					                    [{name:'北京'},{name:'银川'}],
					                    [{name:'北京'},{name:'衢州'}],
					                    [{name:'北京'},{name:'南昌'}],
					                    [{name:'北京'},{name:'昆明'}],
					                    [{name:'北京'},{name:'贵阳'}],
					                    [{name:'北京'},{name:'兰州'}],
					                    [{name:'北京'},{name:'拉萨'}],
					                    [{name:'北京'},{name:'连云港'}],
					                    [{name:'北京'},{name:'临沂'}],
					                    [{name:'北京'},{name:'柳州'}],
					                    [{name:'北京'},{name:'宁波'}],
					                    [{name:'北京'},{name:'南京'}],
					                    [{name:'北京'},{name:'南宁'}],
					                    [{name:'北京'},{name:'南通'}],
					                    [{name:'北京'},{name:'上海'}],
					                    [{name:'北京'},{name:'沈阳'}],
					                    [{name:'北京'},{name:'西安'}],
					                    [{name:'北京'},{name:'汕头'}],
					                    [{name:'北京'},{name:'深圳'}],
					                    [{name:'北京'},{name:'青岛'}],
					                    [{name:'北京'},{name:'济南'}],
					                    [{name:'北京'},{name:'太原'}],
					                    [{name:'北京'},{name:'乌鲁木齐'}],
					                    [{name:'北京'},{name:'潍坊'}],
					                    [{name:'北京'},{name:'威海'}],
					                    [{name:'北京'},{name:'温州'}],
					                    [{name:'北京'},{name:'武汉'}],
					                    [{name:'北京'},{name:'无锡'}],
					                    [{name:'北京'},{name:'厦门'}],
					                    [{name:'北京'},{name:'西宁'}],
					                    [{name:'北京'},{name:'徐州'}],
					                    [{name:'北京'},{name:'烟台'}],
					                    [{name:'北京'},{name:'盐城'}],
					                    [{name:'北京'},{name:'珠海'}],
					                    [{name:'上海'},{name:'包头'}],
					                    [{name:'上海'},{name:'北海'}],
					                    [{name:'上海'},{name:'广州'}],
					                    [{name:'上海'},{name:'郑州'}],
					                    [{name:'上海'},{name:'长春'}],
					                    [{name:'上海'},{name:'重庆'}],
					                    [{name:'上海'},{name:'长沙'}],
					                    [{name:'上海'},{name:'成都'}],
					                    [{name:'上海'},{name:'丹东'}],
					                    [{name:'上海'},{name:'大连'}],
					                    [{name:'上海'},{name:'福州'}],
					                    [{name:'上海'},{name:'海口'}],
					                    [{name:'上海'},{name:'呼和浩特'}],
					                    [{name:'上海'},{name:'合肥'}],
					                    [{name:'上海'},{name:'哈尔滨'}],
					                    [{name:'上海'},{name:'舟山'}],
					                    [{name:'上海'},{name:'银川'}],
					                    [{name:'上海'},{name:'南昌'}],
					                    [{name:'上海'},{name:'昆明'}],
					                    [{name:'上海'},{name:'贵阳'}],
					                    [{name:'上海'},{name:'兰州'}],
					                    [{name:'上海'},{name:'拉萨'}],
					                    [{name:'上海'},{name:'连云港'}],
					                    [{name:'上海'},{name:'临沂'}],
					                    [{name:'上海'},{name:'柳州'}],
					                    [{name:'上海'},{name:'宁波'}],
					                    [{name:'上海'},{name:'南宁'}],
					                    [{name:'上海'},{name:'北京'}],
					                    [{name:'上海'},{name:'沈阳'}],
					                    [{name:'上海'},{name:'秦皇岛'}],
					                    [{name:'上海'},{name:'西安'}],
					                    [{name:'上海'},{name:'石家庄'}],
					                    [{name:'上海'},{name:'汕头'}],
					                    [{name:'上海'},{name:'深圳'}],
					                    [{name:'上海'},{name:'青岛'}],
					                    [{name:'上海'},{name:'济南'}],
					                    [{name:'上海'},{name:'天津'}],
					                    [{name:'上海'},{name:'太原'}],
					                    [{name:'上海'},{name:'乌鲁木齐'}],
					                    [{name:'上海'},{name:'潍坊'}],
					                    [{name:'上海'},{name:'威海'}],
					                    [{name:'上海'},{name:'温州'}],
					                    [{name:'上海'},{name:'武汉'}],
					                    [{name:'上海'},{name:'厦门'}],
					                    [{name:'上海'},{name:'西宁'}],
					                    [{name:'上海'},{name:'徐州'}],
					                    [{name:'上海'},{name:'烟台'}],
					                    [{name:'上海'},{name:'珠海'}],
					                    [{name:'广州'},{name:'北海'}],
					                    [{name:'广州'},{name:'郑州'}],
					                    [{name:'广州'},{name:'长春'}],
					                    [{name:'广州'},{name:'重庆'}],
					                    [{name:'广州'},{name:'长沙'}],
					                    [{name:'广州'},{name:'成都'}],
					                    [{name:'广州'},{name:'常州'}],
					                    [{name:'广州'},{name:'大连'}],
					                    [{name:'广州'},{name:'福州'}],
					                    [{name:'广州'},{name:'海口'}],
					                    [{name:'广州'},{name:'呼和浩特'}],
					                    [{name:'广州'},{name:'合肥'}],
					                    [{name:'广州'},{name:'杭州'}],
					                    [{name:'广州'},{name:'哈尔滨'}],
					                    [{name:'广州'},{name:'舟山'}],
					                    [{name:'广州'},{name:'银川'}],
					                    [{name:'广州'},{name:'南昌'}],
					                    [{name:'广州'},{name:'昆明'}],
					                    [{name:'广州'},{name:'贵阳'}],
					                    [{name:'广州'},{name:'兰州'}],
					                    [{name:'广州'},{name:'拉萨'}],
					                    [{name:'广州'},{name:'连云港'}],
					                    [{name:'广州'},{name:'临沂'}],
					                    [{name:'广州'},{name:'柳州'}],
					                    [{name:'广州'},{name:'宁波'}],
					                    [{name:'广州'},{name:'南京'}],
					                    [{name:'广州'},{name:'南宁'}],
					                    [{name:'广州'},{name:'南通'}],
					                    [{name:'广州'},{name:'北京'}],
					                    [{name:'广州'},{name:'上海'}],
					                    [{name:'广州'},{name:'沈阳'}],
					                    [{name:'广州'},{name:'西安'}],
					                    [{name:'广州'},{name:'石家庄'}],
					                    [{name:'广州'},{name:'汕头'}],
					                    [{name:'广州'},{name:'青岛'}],
					                    [{name:'广州'},{name:'济南'}],
					                    [{name:'广州'},{name:'天津'}],
					                    [{name:'广州'},{name:'太原'}],
					                    [{name:'广州'},{name:'乌鲁木齐'}],
					                    [{name:'广州'},{name:'温州'}],
					                    [{name:'广州'},{name:'武汉'}],
					                    [{name:'广州'},{name:'无锡'}],
					                    [{name:'广州'},{name:'厦门'}],
					                    [{name:'广州'},{name:'西宁'}],
					                    [{name:'广州'},{name:'徐州'}],
					                    [{name:'广州'},{name:'烟台'}],
					                    [{name:'广州'},{name:'盐城'}]
					                ],
					            },
					            geoCoord: {
					                '上海': [121.4648,31.2891],
					                '东莞': [113.8953,22.901],
					                '东营': [118.7073,37.5513],
					                '中山': [113.4229,22.478],
					                '临汾': [111.4783,36.1615],
					                '临沂': [118.3118,35.2936],
					                '丹东': [124.541,40.4242],
					                '丽水': [119.5642,28.1854],
					                '乌鲁木齐': [87.9236,43.5883],
					                '佛山': [112.8955,23.1097],
					                '保定': [115.0488,39.0948],
					                '兰州': [103.5901,36.3043],
					                '包头': [110.3467,41.4899],
					                '北京': [116.4551,40.2539],
					                '北海': [109.314,21.6211],
					                '南京': [118.8062,31.9208],
					                '南宁': [108.479,23.1152],
					                '南昌': [116.0046,28.6633],
					                '南通': [121.1023,32.1625],
					                '厦门': [118.1689,24.6478],
					                '台州': [121.1353,28.6688],
					                '合肥': [117.29,32.0581],
					                '呼和浩特': [111.4124,40.4901],
					                '咸阳': [108.4131,34.8706],
					                '哈尔滨': [127.9688,45.368],
					                '唐山': [118.4766,39.6826],
					                '嘉兴': [120.9155,30.6354],
					                '大同': [113.7854,39.8035],
					                '大连': [122.2229,39.4409],
					                '天津': [117.4219,39.4189],
					                '太原': [112.3352,37.9413],
					                '威海': [121.9482,37.1393],
					                '宁波': [121.5967,29.6466],
					                '宝鸡': [107.1826,34.3433],
					                '宿迁': [118.5535,33.7775],
					                '常州': [119.4543,31.5582],
					                '广州': [113.5107,23.2196],
					                '廊坊': [116.521,39.0509],
					                '延安': [109.1052,36.4252],
					                '张家口': [115.1477,40.8527],
					                '徐州': [117.5208,34.3268],
					                '德州': [116.6858,37.2107],
					                '惠州': [114.6204,23.1647],
					                '成都': [103.9526,30.7617],
					                '扬州': [119.4653,32.8162],
					                '承德': [117.5757,41.4075],
					                '拉萨': [91.1865,30.1465],
					                '无锡': [120.3442,31.5527],
					                '日照': [119.2786,35.5023],
					                '昆明': [102.9199,25.4663],
					                '杭州': [119.5313,29.8773],
					                '枣庄': [117.323,34.8926],
					                '柳州': [109.3799,24.9774],
					                '株洲': [113.5327,27.0319],
					                '武汉': [114.3896,30.6628],
					                '汕头': [117.1692,23.3405],
					                '江门': [112.6318,22.1484],
					                '沈阳': [123.1238,42.1216],
					                '沧州': [116.8286,38.2104],
					                '河源': [114.917,23.9722],
					                '泉州': [118.3228,25.1147],
					                '泰安': [117.0264,36.0516],
					                '泰州': [120.0586,32.5525],
					                '济南': [117.1582,36.8701],
					                '济宁': [116.8286,35.3375],
					                '海口': [110.3893,19.8516],
					                '淄博': [118.0371,36.6064],
					                '淮安': [118.927,33.4039],
					                '深圳': [114.5435,22.5439],
					                '清远': [112.9175,24.3292],
					                '温州': [120.498,27.8119],
					                '渭南': [109.7864,35.0299],
					                '湖州': [119.8608,30.7782],
					                '湘潭': [112.5439,27.7075],
					                '滨州': [117.8174,37.4963],
					                '潍坊': [119.0918,36.524],
					                '烟台': [120.7397,37.5128],
					                '玉溪': [101.9312,23.8898],
					                '珠海': [113.7305,22.1155],
					                '盐城': [120.2234,33.5577],
					                '盘锦': [121.9482,41.0449],
					                '石家庄': [114.4995,38.1006],
					                '福州': [119.4543,25.9222],
					                '秦皇岛': [119.2126,40.0232],
					                '绍兴': [120.564,29.7565],
					                '聊城': [115.9167,36.4032],
					                '肇庆': [112.1265,23.5822],
					                '舟山': [122.2559,30.2234],
					                '苏州': [120.6519,31.3989],
					                '莱芜': [117.6526,36.2714],
					                '菏泽': [115.6201,35.2057],
					                '营口': [122.4316,40.4297],
					                '葫芦岛': [120.1575,40.578],
					                '衡水': [115.8838,37.7161],
					                '衢州': [118.6853,28.8666],
					                '西宁': [101.4038,36.8207],
					                '西安': [109.1162,34.2004],
					                '贵阳': [106.6992,26.7682],
					                '连云港': [119.1248,34.552],
					                '邢台': [114.8071,37.2821],
					                '邯郸': [114.4775,36.535],
					                '郑州': [113.4668,34.6234],
					                '鄂尔多斯': [108.9734,39.2487],
					                '重庆': [107.7539,30.1904],
					                '金华': [120.0037,29.1028],
					                '铜川': [109.0393,35.1947],
					                '银川': [106.3586,38.1775],
					                '镇江': [119.4763,31.9702],
					                '长春': [125.8154,44.2584],
					                '长沙': [113.0823,28.2568],
					                '长治': [112.8625,36.4746],
					                '阳泉': [113.4778,38.0951],
					                '青岛': [120.4651,36.3373],
					                '韶关': [113.7964,24.7028]
					            }
					        },
					        {
					            name: '北京 Top10',
					            type: 'map',
					            mapType: 'china',
					            data:[],
					            markLine : {
					                smooth:true,
					                effect : {
					                    show: true,
					                    scaleSize: 1,
					                    period: 30,
					                    color: '#fff',
					                    shadowBlur: 10
					                },
					                itemStyle : {
					                    normal: {
					                        borderWidth:1,
					                        lineStyle: {
					                            type: 'solid',
					                            shadowBlur: 10
					                        }
					                    }
					                },
					                data : [
					                    [{name:'北京'}, {name:'上海',value:95}],
					                    [{name:'北京'}, {name:'广州',value:90}],
					                    [{name:'北京'}, {name:'大连',value:80}],
					                    [{name:'北京'}, {name:'南宁',value:70}],
					                    [{name:'北京'}, {name:'南昌',value:60}],
					                    [{name:'北京'}, {name:'拉萨',value:50}],
					                    [{name:'北京'}, {name:'长春',value:40}],
					                    [{name:'北京'}, {name:'包头',value:30}],
					                    [{name:'北京'}, {name:'重庆',value:20}],
					                    [{name:'北京'}, {name:'常州',value:10}]
					                ]
					            },
					            markPoint : {
					                symbol:'emptyCircle',
					                symbolSize : function (v){
					                    return 10 + v/10
					                },
					                effect : {
					                    show: true,
					                    shadowBlur : 0
					                },
					                itemStyle:{
					                    normal:{
					                        label:{show:false}
					                    },
					                    emphasis: {
					                        label:{position:'top'}
					                    }
					                },
					                data : [
					                    {name:'上海',value:95},
					                    {name:'广州',value:90},
					                    {name:'大连',value:80},
					                    {name:'南宁',value:70},
					                    {name:'南昌',value:60},
					                    {name:'拉萨',value:50},
					                    {name:'长春',value:40},
					                    {name:'包头',value:30},
					                    {name:'重庆',value:20},
					                    {name:'常州',value:10}
					                ]
					            }
					        },
					        {
					            name: '上海 Top10',
					            type: 'map',
					            mapType: 'china',
					            data:[],
					            markLine : {
					                smooth:true,
					                effect : {
					                    show: true,
					                    scaleSize: 1,
					                    period: 30,
					                    color: '#fff',
					                    shadowBlur: 10
					                },
					                itemStyle : {
					                    normal: {
					                        borderWidth:1,
					                        lineStyle: {
					                            type: 'solid',
					                            shadowBlur: 10
					                        }
					                    }
					                },
					                data : [
					                    [{name:'上海'},{name:'包头',value:95}],
					                    [{name:'上海'},{name:'昆明',value:90}],
					                    [{name:'上海'},{name:'广州',value:80}],
					                    [{name:'上海'},{name:'郑州',value:70}],
					                    [{name:'上海'},{name:'长春',value:60}],
					                    [{name:'上海'},{name:'重庆',value:50}],
					                    [{name:'上海'},{name:'长沙',value:40}],
					                    [{name:'上海'},{name:'北京',value:30}],
					                    [{name:'上海'},{name:'丹东',value:20}],
					                    [{name:'上海'},{name:'大连',value:10}]
					                ]
					            },
					            markPoint : {
					                symbol:'emptyCircle',
					                symbolSize : function (v){
					                    return 10 + v/10
					                },
					                effect : {
					                    show: true,
					                    shadowBlur : 0
					                },
					                itemStyle:{
					                    normal:{
					                        label:{show:false}
					                    },
					                    emphasis: {
					                        label:{position:'top'}
					                    }
					                },
					                data : [
					                    {name:'包头',value:95},
					                    {name:'昆明',value:90},
					                    {name:'广州',value:80},
					                    {name:'郑州',value:70},
					                    {name:'长春',value:60},
					                    {name:'重庆',value:50},
					                    {name:'长沙',value:40},
					                    {name:'北京',value:30},
					                    {name:'丹东',value:20},
					                    {name:'大连',value:10}
					                ]
					            }
					        },
					        {
					            name: '广州 Top10',
					            type: 'map',
					            mapType: 'china',
					            data:[],
					            markLine : {
					                smooth:true,
					                effect : {
					                    show: true,
					                    scaleSize: 1,
					                    period: 30,
					                    color: '#fff',
					                    shadowBlur: 10
					                },
					                itemStyle : {
					                    normal: {
					                        borderWidth:1,
					                        lineStyle: {
					                            type: 'solid',
					                            shadowBlur: 10
					                        }
					                    }
					                },
					                data : [
					                    [{name:'广州'},{name:'福州',value:95}],
					                    [{name:'广州'},{name:'太原',value:90}],
					                    [{name:'广州'},{name:'长春',value:80}],
					                    [{name:'广州'},{name:'重庆',value:70}],
					                    [{name:'广州'},{name:'西安',value:60}],
					                    [{name:'广州'},{name:'成都',value:50}],
					                    [{name:'广州'},{name:'常州',value:40}],
					                    [{name:'广州'},{name:'北京',value:30}],
					                    [{name:'广州'},{name:'北海',value:20}],
					                    [{name:'广州'},{name:'海口',value:10}]
					                ]
				            	},
					            markPoint : {
					                symbol:'emptyCircle',
					                symbolSize : function (v){
					                    return 10 + v/10
					                },
					                effect : {
					                    show: true,
					                    shadowBlur : 0
					                },
					                itemStyle:{
					                    normal:{
					                        label:{show:false}
					                    },
					                    emphasis: {
					                        label:{position:'top'}
					                    }
					                },
					                data : [
					                    {name:'福州',value:95},
					                    {name:'太原',value:90},
					                    {name:'长春',value:80},
					                    {name:'重庆',value:70},
					                    {name:'西安',value:60},
					                    {name:'成都',value:50},
					                    {name:'常州',value:40},
					                    {name:'北京',value:30},
					                    {name:'北海',value:20},
					                    {name:'海口',value:10}
					                ]
					            }
        					}
    					]
				};
				if (option && typeof option === "object") {
			        myChart.setOption(option, true)
			    }  
			},

	}
	var option1 = {
		dom :$("#container0")[0],
		backgroundColor:"#ffffff",
		title:{
			text: '某站点用户访问来源',
        	subtext: '纯属虚构',
        	x:'center'
        },
        tooltip:{

	        trigger:'item',
	        showDelay:20,
	        hideDelay: 500, 
	        transitionDuration : 0.4,  // 动画变换时间，单位s
			formatter: "{b}: {c}(亿) ({d}%)<br>今日增量：0<br>最近7日增量：0<br>最近一个月增量：0<br>"
        },
		
 
        legend:{
        	orient : 'vertical',//horizontal,水平

	        //小图标位置
	       // x : 'left',//right,center
	        //y :"bottom",//center,top,
	        top: '70px',
           
            left: '20px',
	        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],

        },
        calculable:true,

        series:{
        	hoverAnimation:false,//hover动画开关
        	 selectedMode: 'single',//选中时的状态
            name:'访问来源',
            type:'pie',
            radius : '45%',
            center: ['50%', '60%'],
           
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
            ]
        }
	}

	var option2 = {
		dom :$("#container")[0],
		backgroundColor:"#ffffff",
		grid: {
	        width:"86%",
	        height:"75%",
	        top:"65px"
	        // left: '2%',
	        // right: '0.5%',
	        // bottom: '3%',
	        // containLabel: true
        },
		title: {

            text: '数据增量统计',
            left: '20px',
            top:'10px',
            textStyle: {"fontSize": 16,"fontWeight": "500","color": "#333","width":"13000px"} ,
            subtext:'统计最近30天数据增量',

        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['省厅数据','地市数据','所有数据'],
             top: '20px'
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['2017/11/3','2017/11/9','2017/11/15','2017/11/19','2017/11/23','2017/11/25','2017/11/30']

            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [ 
            {  
                name:'省厅数据',
                type:'line',
                cursor: 'pointer',
                top:'100px',
                // stack: '总量',
                data:[20, 32, 51, 34, 70, 30, 10],
                itemStyle:{
                  normal:{
                      color: "#F60" //图标颜色
                  }
              },
              // lineStyle:{
              //     normal:{
              //         width:10,  //连线粗细
              //         color: "#0F0"  //连线颜色
              //     }
              // }
            },
            {
                name:'地市数据',
                type:'line',
                // stack: '总量',
                data:[30, 22, 31, 34, 90, 50, 40]
            },
            {
                name:'所有数据',
                type:'line',
                data:[50, 54, 82, 68, 160, 80, 50]
            }
        ]
	};


	
	Echartsoption.prototype.pieOption(option1);
	Echartsoption.prototype.lineOption(option2);
	Echartsoption.prototype.barOption();
	Echartsoption.prototype.lineOption2();
	
	</script>
</body>
</html>